<template>
  <div>
    <el-card class="plan">
      <el-row type="flex" class="planList">
        <el-col :span="12" class="title">公告</el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <ul class="plan-ul">
            <li v-for="(item, index) in list" :key="index" @click="goPage(item.id)">
              <span class="planTitle">{{ item.title }}</span>
              <span>（{{ getUpdateTime(item.createTime) }}） By
                {{ item.authorName }}</span>
            </li>
          </ul>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { getArticleList } from "@/service/workbenchApi";

export default {
  name: "companyPlan",
  data() {
    return {
      list: [],
      pn: 1,
      ps: 8,
    };
  },
  methods: {
    getUpdateTime(val) {
      if (val) {
        let str = val.substring(0, 10);
        return str;
      }
    },
    goPage(id) {
      this.$router.push({
        path: "/exchange/articleListDetail",
        query: { menuFlag: "1", id: id },
      });
    },
    getData() {
      getArticleList(this.pn, this.ps).then((res) => {
        if (res.code == 0) {
          this.list = res.data.records;
        } else {
          this.$message.error(`${res.message}`);
        }
      });
    },
  },
  created() {
    this.getData();
  },
};
</script>
<style lang="scss" scoped>
.plan {
  box-sizing: border-box;
  width: 100%;
  // height: 153px;
  background: #fff;
  margin-top: 10px;

  .title {
    font-size: 18px;
    color: #303133;
    font-weight: bold;
  }
}

.plan-ul {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: space-between;
  margin-top: 10px;

  li {
    width: 100%;
    line-height: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px dashed #ccc;
    padding-bottom: 5px;
    cursor: pointer;

    span {
      vertical-align: middle;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      width: 330px;
    }

    span.planTitle {
      display: inline-block;
      width: calc(100% - 110px);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    span.planTitle:hover {
      color: #00b98d !important;
    }
  }
}
</style>
